<template>
  <div id="printCallRecords1" ref="boxbb">
    <div class="title">
      <span class="line"></span>
      <i class="el-icon-arrow-left" v-show="!showMap" style="margin-right:30px;cursor: pointer;font-size:18px;font-weight:1000;" @click.stop="blackMap()"></i>
      <span v-if="sendData.label=='车辆信息'"><i style="font-size:.1rem;" class="el-icon-place"></i> {{$t('wechat.carinfo')}}</span>
      <span v-if="sendData.label=='GPS信息'"><i style="font-size:.1rem;" class="el-icon-location-outline"></i> GPS信息</span>
      <span v-if="sendData.label=='搜索关键字'"><i style="font-size:.1rem;" class="el-icon-search"></i> {{$t('wechat.searchKeyword')}}</span>
      <span v-if="sendData.label=='搜索路线'"><i style="font-size:.1rem;" class="el-icon-search"></i> {{$t('wechat.searchLine')}}</span>
      <span v-if="sendData.label=='GPS记录'"><i style="font-size:.1rem;" class="el-icon-search"></i> {{$t('wechat.gps')}}</span>
      
      <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>
      <div id="mapBoxList" class="mainContentBox"  v-show="showMap" ref="list">


          <div @click.stop="openMpaDetails(item)" class="item" v-for="(item,index) in list" :key="index">
            <!-- GPS -->
            <div v-if="sendData.label=='GPS信息'" class="itemChildren">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574" stroke="#54a2ff" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z" fill="#54a2ff" stroke="#54a2ff" stroke-width="2" stroke-linejoin="round"/><path d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z" fill="#FFF" stroke="#FFF" stroke-width="2" stroke-linejoin="round"/></svg>
              <div class="gpsClass" style="width:300px;margin-left:20px;">
                <div>{{ item.address }}</div>
                <div>{{ formateDate(item.ctime) }}</div>
              </div>
            </div>
            <div v-if="sendData.label=='车辆信息'" class="itemChildren">
              <svg t="1745824227115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7054" width="40" height="40"><path d="M328.3 689.2c0 58.9-49.9 106.7-111.5 106.7s-111.5-47.8-111.5-106.7c0-58.9 49.8-106.6 111.3-106.7 61.7 0 111.7 47.8 111.7 106.7zM887.7 689.2c0 58.9-49.9 106.7-111.4 106.7-61.6 0-111.5-47.8-111.5-106.7 0-58.9 49.9-106.6 111.5-106.7 61.5 0 111.4 47.8 111.4 106.7z" p-id="7055" fill="#1296db"></path><path d="M1022.6 644.4c-14-78.2-49.7-151.3-122.9-179.3-44.4-17-83.5-45.6-111.5-84.1-73.4-100.8-186.5-152.8-297.9-152.8-128.7 0-255.2 69.4-315.7 213.3C89.2 473.5 46.8 551.8 32 635c-0.2 1-1 1.7-2 1.7h-0.6C25.2 637 0 639.8 0 673.1c0 31.9 1.7 52.3 26.5 55.4 0.2 3.6 1.7 6.8 4.1 9.1 2.4 2.3 5.7 3.7 9.3 3.7h57.8c-8.8-17-13.3-35.8-13.3-54.9v-0.2c0.5-4.6 0.6-7.9 0.6-10.7 6-64.1 62.3-114.2 131-114.2 72.7 0 131.5 56 131.5 125.1 0 19.7-4.7 38.3-13.3 54.9h324.6c-8.8-17-13.3-35.8-13.3-54.9 0-69 58.9-125.1 131.5-125.1 72.7 0 131.5 56 131.5 125.1 0 19.7-4.7 38.3-13.3 54.9h46.1c51.3 0 90.3-46.4 81.3-96.9zM244.2 475.2c3.4-73 92.5-162.1 217.9-176.4v176.4H244.2z m509.7-0.1H519.6V297.4c134.5 9.4 234.5 99.4 234.5 175.4 0 0.8-0.2 1.5-0.2 2.3z" p-id="7056" fill="#1296db"></path></svg>
              <div class="gpsClass" style="width:210px;margin-right:30px;margin-left:15px;">
                <div>车辆信息：{{item.carinfo}}</div>
                <div>车牌：{{item.carnumber}}</div>
              </div>
              <div>
              </div>
            </div>
            <!-- GPS记录 -->
            <div v-if="sendData.label=='GPS记录'" class="itemChildren">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574" stroke="#54a2ff" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z" fill="#54a2ff" stroke="#54a2ff" stroke-width="2" stroke-linejoin="round"/><path d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z" fill="#FFF" stroke="#FFF" stroke-width="2" stroke-linejoin="round"/></svg>
              <div class="gpsClass" style="width:210px;margin-right:30px;">
                <div>起点经纬度：({{ item.startlon+','+item.startlat }})</div>
                <div>终点经纬度：({{ item.endlon+','+item.endlat }})</div>
                <div>{{ formateDate(item.ctime) }}</div>
              </div>
              <div>
              </div>
            </div>
            <!-- 相关搜索 -->
            <div v-if="sendData.label=='搜索关键字'" class="itemChildren">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574" stroke="#54a2ff" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z" fill="#54a2ff" stroke="#54a2ff" stroke-width="2" stroke-linejoin="round"/><path d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z" fill="#FFF" stroke="#FFF" stroke-width="2" stroke-linejoin="round"/></svg>
              <div class="gpsClass" style="width:300px;margin-left:20px;" :title="item.keyword">
                <div>{{ item.keyword }}</div>
                <div>{{ formateDate(item.ctime) }}</div>
              </div>

            </div>
            <!-- 搜索路线 -->
            <div v-if="sendData.label=='搜索路线'" class="itemChildren">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574" stroke="#54a2ff" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z" fill="#54a2ff" stroke="#54a2ff" stroke-width="2" stroke-linejoin="round"/><path d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z" fill="#FFF" stroke="#FFF" stroke-width="2" stroke-linejoin="round"/></svg>
              <div class="gpsClass" style="width:300px;margin-left:20px;" :title="'起点：'+item.fromname+'>>'+'终点：'+item.toaddr+item.toname">
                <div>起点：{{ item.fromname }} </div>
                <div>终点：{{ item.toaddr +'-'+item.toaddr }}</div>
              </div>
              <div></div>
            </div>
            <div >
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text"  size="mini" style="margin-right:20px;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>

      <div class="loadingBox" @click="init(1)" v-if="showLoading" style="color:#2196f3"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
      </div>
    <!-- </transition> -->

    
    <!-- 详v-if情部分 -->
    <div v-if="!showMap" class="mainContentBox">
      <position v-if="modal2Visible " :position="position" />
      
      <div v-if="sendData.label=='GPS信息'">
        <div style="margin-top:10px;padding-left:10px;font-weight: bold;border-bottom:1px solid #e3e2e2;height:30px;line-height: 30px;">位置详情信息:</div>
        <div style="height:40px;line-height: 40px;padding-left:10px;border-bottom:1px solid #e3e2e2;"><i class="el-icon-office-building"></i> 地点：{{mapItem.address}}</div>
        <div style="height:40px;line-height: 40px;padding-left:10px;border-bottom:1px solid #e3e2e2;"><i class="el-icon-date"></i> 时间：{{formateDate(mapItem.ctime)}}</div>
        <div style="height:40px;line-height: 40px;padding-left:10px;border-bottom:1px solid #e3e2e2;"><i class="el-icon-map-location"></i>{{$t('wechat.la')}}：{{mapItem.lon}} 纬度：{{mapItem.lat}}</div>

      </div>
      <!-- <div v-if="sendData.label=='搜索关键字'">
        <div style="margin-top:10px;padding-left:10px;font-weight: bold;border-bottom:1px solid #e3e2e2;height:30px;line-height: 30px;">位置详情信息:</div>
        <p><i class="el-icon-date"></i> {{$t('wechat.photoDate')}}：{{mapItem.DateTime}}</p>
        <p><i class="el-icon-picture-outline"></i>{{$t('wechat.fenbianlv')}}：{{mapItem.ImageWidth}}*{{mapItem.ImageHeight}}</p>
      </div> -->
      <div v-if="sendData.label=='搜索路线'">
        <div style="margin-top:10px;padding-left:10px;font-weight: bold;border-bottom:1px solid #e3e2e2;height:30px;line-height: 30px;">位置详情信息:</div>
        <p><i class="el-icon-date"></i> {{$t('wechat.photoDate')}}：{{mapItem.DateTime}}</p>
        <p><i class="el-icon-picture-outline"></i>{{$t('wechat.fenbianlv')}}：{{mapItem.ImageWidth}}*{{mapItem.ImageHeight}}</p>
      </div>
    </div>

    <!-- position -->
    <!-- <a-modal
      :maskClosable="false"
      :getContainer="getRefsAff"
      :destroyOnClose="true"
      v-model="modal2Visible"
      :title="title"
      centered
      @ok="() => (modal2Visible = false)"
    >
      <position :position="position" />
    </a-modal> -->
        <!-- line -->
    <a-modal
      width="100%"
      :destroyOnClose="true"
      :maskClosable="false"
      :getContainer="getRefsAff"
      v-model="modal2VisibleLine"
      :title="titleLine"
      centered
      @ok="() => (modal2VisibleLine = false)"
    >
      <lineMap :lineData="lineData" />
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getCarInfo,getGpsInfo,getKeyFontInfo,getSearchLineInfo,getGpsrecord } from '@/api/map/map_api'
import position from './gps.vue'
import lineMap from './line.vue'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'

export default {
  name: "mapCar1",
  props:['sendData'],
  components:{
    position,
    lineMap
  },
  data() {
    return {
      loadClass:'el-icon-warning-outline',
      loadingText:'点击加载更多',
      showLoading:true,
      showPrint:false,

      showMap:true,
      mapItem:'',
      showRemark:false,
      remark:'',
      id:'',
      title:'',
      list:[],
      titleList:[],
      offset:1,
      limit:20,
      total:0,
      modal2Visible:false,
      modal2VisibleLine:false,
      position:'',
      lineData:'',
      titleLine:'',
      labelList:[
        {
          title:'carinfo',
          translate:'车辆信息'
        },
        {
          title:'carnumber',
          translate:'车牌号'
        },
        {
          title:'address',
          translate:'地址'
        },
        {
          title:'ctime',
          translate:'时间'
        },
        {
          title:'lat',
          translate:'纬度'
        },
        {
          title:'lon',
          translate:'经度'
        },
        {
          title:'keyword',
          translate:'关键词'
        },
        {
          title:'fromaddr',
          translate:'起始地点'
        },
        {
          title:'fromlat',
          translate:'起始纬度'
        },
        {
          title:'fromlon',
          translate:'起始经度'
        },
        {
          title:'fromname',
          translate:'起始名称'
        },
        {
          title:'toaddr',
          translate:'目的地'
        },
        {
          title:'tolat',
          translate:'目的地纬度'
        },
        {
          title:'tolon',
          translate:'目的地经度'
        },
        {
          title:'toname',
          translate:'目的地名称'
        },
        {
          title:'duration',
          translate:'时长'
        },
        {
          title:'endlat',
          translate:'终点纬度'
        },
        {
          title:'endlon',
          translate:'终点经度'
        },
        {
          title:'endpos',
          translate:'终点地址'
        },
        {
          title:'startlat',
          translate:'起点纬度'
        },
        {
          title:'startlon',
          translate:'起点经度'
        },
        {
          title:'startpos',
          translate:'起点地址'
        },
        {
          title:'starttime',
          translate:'开始时间'
        },
      ]
    };
  },
    watch:{
    '$store.state.account.mapcar1':function(){
      this.offset=1
      this.total=0
      this.list = []
      this.showMap = true;
      this.loadingText = '点击加载更多';
      this.showLoading = true,
      this.init()
    }
  },
  created(){
    this.showMap = true;
    this.init()
  },
  methods:{
    handleScroll(){
      // 获取列表元素
      const list = this.$refs.list;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
        this.showLoading=true;
        
        if(this.list.length<this.total){  
          this.loadClass = 'el-icon-warning-outline';
          this.loadingText = '正在加载. . .';
          this.offset++;
          // 加载更多数据
          let that = this;
          setTimeout(()=>{
            that.init();
          },1000)
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },
    blackMap(){
      this.mapItem = '';
      this.position = '';
      this.showMap = true;
    },
    openMpaDetails(item){
      if(this.sendData.label == '搜索关键字'){
        return;
      }else if(this.sendData.label == '搜索路线'){
        this.lineData=item
        this.titleLine=item.fromaddr+item.fromname+'-至-'+item.toaddr+item.toname
        this.modal2VisibleLine=true
        this.showMap=true;
      }else if(this.sendData.label == 'GPS记录'){
        let data = {
          fromlat:item.startlat,
          fromlon:item.startlon,
          tolat:item.endlat,
          tolon:item.endlon
        }
        this.lineData=data
        this.titleLine='暂无信息'
        this.modal2VisibleLine=true
        this.showMap=true;
      }
      else{
      this.mapItem = item;
      this.position={
        _x:item.lat,
        _y:item.lon,
        title:item.address
      }
      this.modal2Visible=true
      this.showMap = false;
      }
    },
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:this.sendData.app_name,
        account_id:'',
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.list = [];
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    formateLabel(label){
      let data=''
      for (let index = 0; index < this.labelList.length; index++) {
        const element = this.labelList[index];
            if(label==element.title){
              data=element.translate
              break
            }
      }
        return data
    },
    getRefsAff(){
      return  this.$refs.boxbb
    },
    formateDate(date){
      return parseTime(date)
    },
    viewLine(row){
      this.lineData=row
      this.titleLine=row.fromaddr+row.fromname+'-至-'+row.toaddr+row.toname
      this.modal2VisibleLine=true
    },
    viewPosition(row){
      this.title='地址： '+row.address
      this.position={
        _x:row.lat,
        _y:row.lon,
        title:row.address
      }
      this.modal2Visible=true
    },
      init(e){
        if(e){
          this.offset++
        }

        // this.total=res.data[0].cnt
        this.titleList=[]
        // this.total=res.data[0].cnt
        if(this.sendData.label=="车辆信息"){
          this.carInfo()
        }else if(this.sendData.label=="GPS信息"){
          this.gpsInfo()
        }else if(this.sendData.label=="搜索关键字"){
          this.keyFont()
        }else if(this.sendData.label=="搜索路线"){
          this.searchLine()
        }else if(this.sendData.label=="GPS记录"){
          this.getGpsrecordFn()
        }
      },
      // 车辆信息
      carInfo(){
          let data={
            proof_num:this.sendData.proof_num,
            app_name:this.sendData.app_name,
            model:'map_car',
          }
          getCarInfo(data).then(res=>{
            if(res.data.length == 0){
              this.loadClass = 'el-icon-success';
            this.loadingText = '没有更多了！';
            return
            }
            for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              this.list.push(element)
            }
            this.total=res.data[0].cnt
            // this.list=res.data
            for(var key in res.data[0]){
              this.titleList.push(key)
            }
          })
      },
      // gps信息
      gpsInfo(){
             let data={
            proof_num:this.sendData.proof_num,
            app_name:this.sendData.app_name,
            model:'map_gpsinfo',
            offset:this.offset,
            limit:this.limit
          }
          getGpsInfo(data).then(res=>{
            if(res.data.length == 0){
              this.loadClass = 'el-icon-success';
            this.loadingText = '没有更多了！';
            return
            }
            for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              this.list.push(element)
            }
            this.total=res.data[0].cnt
            for(var key in res.data[0]){
              this.titleList.push(key)
            }
          })
      },
      // 搜索zi
      keyFont(){
        let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:'map_searchkey',
          offset:this.offset,
          limit:this.limit
        }
        getKeyFontInfo(data).then(res=>{
          if(res.data.length == 0){
              this.loadClass = 'el-icon-success';
            this.loadingText = '没有更多了！';
            return
            }
          for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              this.list.push(element)
            }

            this.total=res.data[0].cnt
          for(var key in res.data[0]){
            this.titleList.push(key)
          }
        })
      },
      // 关键字搜索
      searchLine(){
      let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:'map_searchline',
          offset:this.offset,
          limit:this.limit
        }
        getSearchLineInfo(data).then(res=>{
          if(res.data.length == 0){
              this.loadClass = 'el-icon-success';
            this.loadingText = '没有更多了！';
            return
            }
          for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              this.list.push(element)
            }
           this.total=res.data[0].cnt
          for(var key in res.data[0]){
            this.titleList.push(key)
          }
        })
      },
      // 关键字搜索
      getGpsrecordFn(){
      let data={
          proof_num:this.sendData.proof_num,
          app_name:this.sendData.app_name,
          model:'map_gpsrecord',
          offset:this.offset,
          limit:this.limit
        }
        getGpsrecord(data).then(res=>{
          if(res.data.length == 0){
              this.loadClass = 'el-icon-success';
            this.loadingText = '没有更多了！';
            return
            }
          for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              this.list.push(element)
            }
           this.total=res.data[0].cnt
          for(var key in res.data[0]){
            this.titleList.push(key)
          }
        })
      },
    //打印
    printPdf(){
        printJS({
          printable: 'printCallRecords1', // 直接传入元素 id
          type: 'html',
          targetStyles: ['*'],           // 保留页面样式
          scanStyles: false,
          style:`.loadingBox{
  width: 100%;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}
.gpsClass{
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.gpsClass>div{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.gpsClass111{
width: 200px;

}

.itemChildren{
  padding-top: 10px;
  display: flex;
  align-items: center !important;
  justify-content: space-between;
}
  .item{
    border-bottom: 1px solid #dedede;
    min-height:60px ;
    cursor: pointer;
    padding:0 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item:hover{
    background: #e9e9e9;
  }
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
#printCallRecords1{
  position: relative;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 5px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.mainContentBox {
  /* padding: 0 10px; */
  height: 100%;
  overflow-y: auto;
  padding-bottom:100px;
}

.mainContentBox::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.mainContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.mainContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}`
        });
    },
    // 搜索
    onSearch(){

    },
    handleSizeChange(val) {
      this.limit=val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset=val
      this.init()
    }
  }
};
</script>

<style scoped>
.loadingBox{
  width: 100%;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}
.gpsClass{
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.gpsClass>div{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.gpsClass111{
width: 200px;

}

.itemChildren{
  padding-top: 10px;
  display: flex;
  align-items: center !important;
  justify-content: space-between;
}
  .item{
    border-bottom: 1px solid #dedede;
    min-height:60px ;
    cursor: pointer;
    padding:0 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item:hover{
    background: #e9e9e9;
  }
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
#printCallRecords1{
  position: relative;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 5px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.mainContentBox {
  /* padding: 0 10px; */
  height: 100%;
  overflow-y: auto;
  padding-bottom:100px;
}

.mainContentBox::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.mainContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.mainContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
</style>
